<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>地图编辑预览</title>
  <link rel="stylesheet" href="./css/index.css" />
  <script src="./js/editor.min.js"></script>
  <script src="./js/vue3.js"></script>
</head>

<body>
  <div id="app" class="full-page dis over-hide" style="min-width: 1200px">
    <div class="demo">
      <ul>
        <li v-for="(item,i) in demoList" :key="i" :class="i===activeOperate?'active':''" @click="init(item.fileName)">
          {{item.title}}
        </li>
      </ul>
    </div>
    <!-- 编辑器 -->
    <div class="editor-wrap">
      <div id="editor" class="full-page"></div>
      <!-- 操作按钮 -->
      <ul class="operation-wrap">
        <li v-for="(item,i) in btns" :key="i" @click="handleBtnClick(item)">
          {{item.title}}
        </li>
      </ul>
    </div>
    <!-- 思极地图 -->
    <div id="csmMap">
      <iframe id="iframeMap"></iframe>
    </div>
  </div>
</body>
<script>
  const { createApp, ref, onMounted } = Vue

  function setup () {
    const activeOperate = ref('0')
    let mEditor = null

    const demoList = [
      { fileName: 'baseMap', title: '切换底图' },
      { fileName: 'flyTo', title: '平滑移动' },
      { fileName: 'setView', title: '视图聚焦' },
      { fileName: 'addMarkers', title: '添加标记' },
      { fileName: 'addPoints', title: '添加点' },
      { fileName: 'addPolyLine', title: '添加线' },
      { fileName: 'addPolygon', title: '添加面' },
      { fileName: 'addBoxes', title: '添加立方体' },
      { fileName: 'addLabels', title: '添加标签' },
      { fileName: 'addPopup', title: '添加弹窗' },
      { fileName: 'addModel', title: '添加模型' }
    ]
    const btns = [
      { id: 'format', title: '格式化' },
      { id: 'run', title: '运行' },
      { id: 'restore', title: '还原' },
    ]
    onMounted(() => {
      init('baseMap')
    })
    // 初始化
    function init (fileName) {
      const i = demoList.findIndex((el) => el.fileName === fileName) || 0
      // script正则校验
      const scriptReg = /<script[^>]*>([\s\S]*?)<\/script>/g
      const url = `./file/${demoList[i].fileName}.html`
      const req = new XMLHttpRequest()
      activeOperate.value = i
      req.open('GET', url, true)
      req.send()
      req.onreadystatechange = function () {
        const { readyState, status, responseText } = req || {}
        if (readyState == 4 && status == 200) {
          const scripts = responseText.match(scriptReg)
          const removeScript = scripts.find((v) => v.includes('// <![CDATA[  <-- For SVG support'))
          // 去除加载的script标签、link引入
          const content = responseText.replace(removeScript, '')

          if (mEditor) {
            mEditor.setValue(content)
            mEditor.initCode = content
          } else {
            mEditor = new Editor({
              id: 'editor',
              content,
            })
          }
          setTimeout(() => {
            updateContent(content)
          }, 500)
        }
      }
    }
    // 按钮点击
    function handleBtnClick ({ id }) {
      const { editor, initCode } = mEditor
      switch (id) {
        // 格式化
        case 'format':
          editor.getAction(['editor.action.formatDocument'])._run()
          break
        // 运行
        case 'run':
          const content = mEditor.getValue()
          updateContent(content)
          break
        // 还原
        case 'restore':
          editor.setValue(initCode)
          updateContent(initCode)
          break
      }
    }
    // 更新iframe
    function updateContent (content) {
      const container = document.getElementById('csmMap')
      container.innerHTML = ''
      const iframe = document.createElement('iframe')
      iframe.id = 'iframeMap'
      iframe.className = 'full-height'
      container.appendChild(iframe)
      const iframeView =
        iframe.contentDocument || iframe.contentWindow.document
      iframeView.open()
      iframeView.write(content)
      iframeView.close()
    }
    return {
      activeOperate,
      demoList,
      btns,
      init,
      handleBtnClick
    }
  }

  createApp({ setup }).mount('#app')
</script>

</html>